<html>
	<head>
		<script src="https://github.com/sidelab/interact/raw/master/interact.js"></script>
	</head>
	<body>
		<canvas id="test" width="500" height="500" style="border:1px dotted;float:left"></canvas>
		<script type="text/javascript">console.log("Script version .16")</script>
		<script type="text/javascript">
		var lastAngle = -1;
		var dist = -1;
		var angle = 0;
		var img = new Image();
		img.src = "http://www.gadgetlite.com/wp-content/uploads/2011/04/Google.jpg";
		var demoCanvas = document.getElementById("test"), context = demoCanvas.getContext('2d'), eventMonitor = INTERACT.watch(demoCanvas, {
				detailed : true
			}), touchColors = {};

			var p1 = {
				col : "#00FF00",
				id : -1
			}, p2 = {
				col : "#0000FF",
				id : -1
			};

			// handle pointer down events
			eventMonitor.bind('pointerDownMulti', function(evt, absXY, relXY) {
				var touchData = relXY;
				while(touchData) {
					if(p1.id == -1) {
						p1.id = relXY.id;
						p1.x = relXY.x;
						p1.y = relXY.y;
					} else if(p2.id == -1) {
						p2.id = relXY.id;
						p2.x = relXY.x;
						p2.y = relXY.y;
					}
					if(p2.id != -1 && p1.id != -1){
						lastAngle = getAngle(p1, p2);
						dist = distance(p1,p2);
					}
					touchData = touchData.next;
				} // while
			});
			// handle moves
			eventMonitor.bind('pointerMoveMulti', function(evt, absXY, relXY) {
				var touchData = relXY;

				// clear the display
				context.clearRect(0, 0, demoCanvas.width, demoCanvas.height);

				// iterate through the touches and draw them
				while(touchData) {
					var col = -1;
					if(touchData.id == p1.id) {
						col = p1.col;
						p1.x = touchData.x;
						p1.y = touchData.y;
					} else if(touchData.id == p2.id) {
						col = p2.col;
						p2.x = touchData.x;
						p2.y = touchData.y;
					}
					if(col != -1) {
						context.fillStyle = col;

						context.beginPath();
						context.arc(touchData.x, touchData.y, 20, 0, Math.PI * 2, false);
						context.fill();
					}
					touchData = touchData.next;
				} // whiles
				if(angle == -1 || dist == -1)
					return;
				var thisAngle = getAngle(p1, p2);
				angle += (thisAngle - lastAngle);
				angle %= Math.PI * 2;
				lastAngle = thisAngle;
				
				var thisDist = distance(p1, p2);
				var scale = thisDist / dist;
				console.log(scale);
				context.save();
				context.translate(250,250);
				context.rotate(angle);
				context.drawImage(img, -img.width * scale / 2, -img.width * scale / 2, img.width * scale, img.height * scale);
				context.restore();
			});
			// handle pointer up events
			eventMonitor.bind('pointerUpMulti', function(evt, absXY, relXY, deltaXY) {
				if(relXY.id == p1.id) {
					p1.id = -1;
					dist = lastAngle = -1;
				}
				if(relXY.id == p2.id) {
					p2.id = -1;
					dist = lastAngle = -1;
				}
			});
			
			function getAngle(center, location){
				var x = location.x - center.x;
				var y = location.y - center.y;
				if(x == 0 && y > 0)
					return Math.PI / 2;
				if(x == 0 && y < 0)
					return 3 * Math.PI / 2;
				if(y == 0 && x > 0)
					return 0;
				if(y == 0 && x < 0)
					return Math.PI;
				var angle = Math.atan(y/x);
				if(x > 0 && y > 0)
					return angle;
				if(x < 0)
					return Math.PI + angle
				return Math.PI * 2 + angle;
			}
			
			function distance(p1, p2){
				return Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));
			}
</script>
	</body>
</html>